.home {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;

  .top {
    width: 100%;
    height: 182rpx;
    position: relative;
    padding-top: 40rpx;
    padding-left: 52rpx;
    box-sizing: border-box;

    .bg-top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .list {
      color: #3F7932;
      color: 26rpx;
    }
  }

  .card {
    width: calc(100% - 50rpx);
    height: 879rpx;
    margin: 25rpx auto;
    border-radius: 23px;
    background: #FBFBFB;
    box-sizing: border-box;
    box-shadow: -4px 1px 20px 1px rgba(161, 161, 161, 0.44);
    padding-top: 58rpx;

    .card-top {
      height: 41rpx;
      margin-right: 13rpx;
      margin-left: 26rpx;
      box-sizing: border-box;
      position: relative;

      .top-img {
        width: 100%;
        height: 100%;
      }

      .card-title {
        font-size: 30rpx;
        font-weight: 500;
        color: #FE9AA6;
        position: absolute;
      }

      .one {
        top: -20rpx;
        left: 232rpx;
      }

      .two {
        right: 247rpx;
        top: 21rpx;
      }
    }

    .card-center {
      width: 395rpx;
      height: 277rpx;
      margin: 55rpx auto 0;
      position: relative;
      font-size: 0;

      .card-center-img {
        width: 100%;
        height: 100%;
        display: block;
      }

      .card-center-name {
        position: absolute;
        z-index: 999;
        font-size: 34rpx;
        font-weight: 400;
        color: #FFFFFF;
        bottom: calc(50% - 17rpx);
        right: 58rpx;
      }
    }


    .card-totip {
      height: 198rpx;
      margin-left: 23rpx;
      position: relative;

      .card-totip-bg {
        width: 100%;
        height: 100%;
      }

      .card-totip-title {
        width: 100%;
        height: 100%;
        font-size: 28rpx;
        font-weight: 400;
        color: #FF7C8D;
        text-align: center;
        position: absolute;
        box-sizing: border-box;
        top: 64rpx;
        left: 0;
        z-index: 999;
      }
    }

    .card-bottom-img {
      display: block;
      width: 366rpx;
      height: 185rpx;
      margin: 25rpx auto 0;
    }
  }

  .list-card {
    margin-top: 89rpx;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 89rpx;

    .item-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #5C5C5C;

      .card-img {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 19rpx;
      }
    }
  }

  .theme-cake {
    width: calc(100% - 54rpx);
    min-height: 1269rpx;
    margin: 48rpx auto;
    background: linear-gradient(157deg, #F0B7B0, #C6E8F1);
    border: 4px solid #FF6E81;
    border-radius: 21px;
    position: relative;
    padding-top: 29rpx;
    padding-bottom: 40rpx;

    .cake-top {
      width: 454rpx;
      height: 127rpx;
      margin: 0 auto;
      position: relative;

      .cake-top-bg {
        width: 100%;
        height: 100%;
      }

      .cake-top-name {
        width: 100%;
        position: absolute;
        z-index: 100;
        top: 30rpx;
        left: 0;
        font-size: 32rpx;
        font-weight: 400;
        color: #FF5C71;
        text-align: center;
      }
    }

    .cake-center {
      width: calc(100% - 70rpx);
      height: 64rpx;
      display: flex;
      align-items: center;
      margin: 22rpx auto 66rpx;

      .cake-center-left {
        width: 134rpx;
        height: 27rpx;
        border: 3px solid #878C8F;
        opacity: 0.6;
        border-right: none;
        border-left: none;
      }

      .cake-center-center {
        display: flex;
        flex-direction: column;
        text-align: center;
        font-size: 26rpx;
        font-weight: 400;
        color: #878C8F;
        margin: 0 35rpx;
      }
    }

    .cake-bottom {
      width: calc(100% - 46rpx);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 27rpx 30rpx;

      .cake-bottom-item {
        width: 100%;
        height: 414rpx;
        position: relative;

        .item-title {
          width: 174rpx;
          height: 54rpx;
          position: absolute;
          top: 0;
          right: 0;
          font-size: 0;

          .cake-bottom-item-img {
            width: 100%;
            height: 100%;
          }

          .item-title-num {
            width: 100%;
            line-height: 54rpx;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 32rpx;
            font-weight: 400;
            color: #FFFFFF;
            padding-left: 55rpx;
          }
        }


        .cake-bottom-item-content {
          width: 100%;
          height: 378rpx;
          margin-top: 36rpx;
          background: linear-gradient(-30deg, #F0B7B0, #C6E8F1);
          box-shadow: -2px 0px 10px 1px rgba(77, 77, 77, 0.11);
          border-radius: 21rpx;
          padding: 14rpx 13rpx 73rpx;
          box-sizing: border-box;
          font-size: 0;

          .item-img {
            width: 100%;
            height: 100%;
            border-radius: 21rpx;
          }

          .item-name {
            width: 100%;
            text-align: center;
            font-size: 28rpx;
            font-weight: 400;
            margin-top: 18rpx;
            color: #F33951;
          }
        }
      }
    }
  }

  .theme-cake::after {
    content: '';
    width: 51rpx;
    height: 25rpx;
    background: #FF7082;
    clip-path: polygon(0 0, 50% 100%, 100% 0%);
    position: absolute;
    bottom: -25rpx;
    left: calc(50% - 25.5rpx);
  }

  .logo {
    width: 100%;
    margin-top: 62rpx;
    text-align: center;

    .logo-img {
      width: 294rpx;
      height: 59rpx;
      margin-bottom: 28rpx;
    }
  }

  .totip {
    width: calc(100% - 50rpx);
    height: 925rpx;
    margin: 37rpx auto 50rpx;
    position: relative;

    .totip-img {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -1;
    }

    .totip-data {
      width: calc(100% - 112rpx);
      margin: 0 auto;
      margin-top: 76rpx;
      color: #000;
      line-height: 51rpx;
    }
  }

  .totip::before {
    display: table;
    content: "";
  }
}